<template>
    <view>
        <view class="lineBox active">
            <view v-for="(item, index) in lineData" :key="index">
                <view class="lineFlex">
                    <view class="lineTitle">
                        <text v-if="index == 0">出发点</text>
                        <text v-if="index == lineData.length-1">到达点</text>
                    </view>
                    <view class="lineRadius"></view>
                    <view class="lineContent">{{ item.place }}
                        <text v-if="item.departureTime">(</text>
                            {{ item.departureTime }}
                        <text v-if="item.departureTime">)</text>
                        <view v-if="index != lineData.length - 1" class="borderLine"></view>
                    </view>
                </view>
                <view class="lineFlex">
                    <view class="lineTitle2">{{ item.travelTime }}</view>
                    <view class="lineRadius active"></view>
                    <view class="lineContent active">{{ item.address }} <view v-if="index != lineData.length - 1"
                            class="borderLine">
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="starTime && endTime">
                <view>有效期: {{starTime}}-{{endTime}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        lineData: {
            type: Array,
        },
        starTime:{
            type:String
        },
        endTime:{
            type:String
        }
    },
    components: {},
    data() {
        return {
        };
    },
    onLoad() { },
    methods: {}
};
</script>

<style lang="scss" scoped>
.lineBox {
    background: #FFFFFF;
    padding-bottom: 34rpx;
    .scrollTitle {
        font-size: 32rpx;
        color: #1A1A1A;
        padding-bottom: 30rpx;
    }
}

.lineBox.active {
    border-bottom: 1rpx solid #EBEBEB;
}

.boxTitle {
    position: relative;
    height: 104rpx;
    text-align: center;
    color: #1A1A1A;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 104rpx;
}

.lineFlex {
    display: flex;
    align-items: center;
    height: 90rpx;

    .lineTitle {
        font-size: 28rpx;
        color: $sl-color-black;
        font-weight: 400;
        width: 85rpx;
        text-align: right;
    }

    .lineTitle2 {
        color: #AAABAA;
        font-size: 24rpx;
        width: 85rpx;
        text-align: right;
    }

    .lineContent {
        font-size: 28rpx;
        color: $sl-color-black;
        font-weight: 400;
        height: 52rpx;
        display: flex;
        align-items: center;
        position: relative;
        flex: 1;

        .borderLine {
            height: 90rpx;
            width: 2rpx;
            position: absolute;
            left: -51rpx;
            top: 20rpx;
            border-left: 1rpx dashed #E4E4F4
        }
    }

    .lineContent.active {
        color: $sl-color-grey;
        font-size: 24rpx;
    }

    .lineRadius {
        width: 22rpx;
        height: 22rpx;
        background: #E4E4F4;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 40rpx 0 20rpx;
    }

    .lineRadius.active {
        background: #fff;
    }
}
</style>
